<template>
  <div>
    <!-- 头部 -->
    <!-- 头部 -->
    <div class="nav_top d-flex jc-between ai-center bg-white">
      <div> 
        <el-button type="text" @click="back">
          <div class="iconfont icon-back ml-3 fs-xxxl text-dark"></div>
        </el-button>
      </div>
      <div class="fs-xxl text-dark pr-3">
        获取当前定位
      </div>
      <div>
      </div>
    </div>
    <div id="all">
      <div class="d-flex jc-between ai-center px-3 pb-2">
        <div></div>
        <div class="search-input">
          <i class="mintui mintui-search fs-xxl pl-2 pr-2"></i>
          <input type="text" id="suggestId" name="address_detail" placeholder="附近位置" v-model="address_detail" class="input_style">
        </div>

        <el-button v-if="address_detail" type="text" class="text-dark" @click.native="use">使用</el-button>
        <el-button v-if="!address_detail" type="text" class="text-dark" @click.native="getLocation">获取定位</el-button>
      
      </div>
      
      <div id="allmap" style="text-align: center;">
        <div @click="getLocation" style="padding-top: 10rem;">
          <div class="location pb-3" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dizhi"></use>
            </svg>
          </div>
          <span class="text-grey">点击获取定位</span>
        </div>
        
      </div >
      
    </div>
  </div>
    
</template>
<script>
import {MP} from '../../func/baiduMap.js'

    export default {
       inject:['reload'],  
       data(){
           return {
              //详细地址
               address_detail: '', 
               userlocation: {lng: "", lat: ""},
               time: 0,
               id: '',
               routerAlive:true,
               ak: 'gyQnwN7Gw2gFs6RQ0gmGm7YDGlBN5mvb'
           }
       },
       methods: {
        back(){
          this.$router.go(-1)
          // this.$store.commit('deleteId')
        },
        use(){
          // this.routerAlive = false;
          // this.$nextTick(()=>{
          //   this.routerAlive = true;
          // });
        
          if (this.id) {
            this.$router.push('/addAddress/'+this.id)
            this.$store.commit('saveAddress',this.address_detail)
            this.$store.commit('deleteId')
          }else {
            this.$router.push('/addAddress')
            this.$store.commit('saveAddress',this.address_detail)
          }
          

        },
        getLocation(){
            this.$nextTick(function () {

                   var th = this
                   // 创建Map实例
                    MP('gyQnwN7Gw2gFs6RQ0gmGm7YDGlBN5mvb').then(BMap => {
                       
                          //在此调用api
                        var map = new BMap.Map("allmap");
                        
                   // 初始化地图,设置中心点坐标，
                   var point = new BMap.Point(121.160724,31.173277); 
                   // 创建点坐标，汉得公司的经纬度坐标
                   map.centerAndZoom(point, 15);
                   map.enableScrollWheelZoom();
                   
                  //定位
                   var geolocation = new BMap.Geolocation();
                   //开启辅助地位
                   // geolocation.enableSDKLocation();
                   console.log(geolocation)
                   geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);//标出所在地
                    map.panTo(r.point);//地图中心移动
                    
                    //alert('您的位置：'+r.point.lng+','+r.point.lat);
                    var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
                    var gc = new BMap.Geocoder();
                    gc.getLocation(point, function(rs){
                       var addComp = rs.addressComponents; console.log(addComp);//地址信息
                         th.$store.commit('saveCurrentCity',addComp.city)
                         th.address_detail = addComp.province+addComp.city+addComp.district+addComp.street+addComp.streetNumber
                     })
                    //智能搜索
                    // var local = new BMap.LocalSearch(map,   
                    //   { renderOptions:{map: map, autoViewport: true}});

                  }else {
                    alert('failed'+this.getStatus());
                  } 
                    
                  },{enableHighAccuracy: true})

                  



          //建立一个自动完成的对象
                    var ac = new BMap.Autocomplete({
                         "input": "suggestId" ,
                          "location": map
                    })
                   
                    var myValue
                    //鼠标点击下拉列表后的事件
                    ac.addEventListener("onconfirm", function (e) {    
                       var _value = e.item.value;
                       myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

                       th.address_detail = myValue
                       
                       
                       setPlace();
                    });

                    function setPlace() {
                      //清除地图上所有覆盖物
                        map.clearOverlays();    
                        function myFun() {
                          //获取第一个智能搜索的结果
                            th.userlocation = local.getResults().getPoi(0).point;   
                            map.centerAndZoom(th.userlocation, 18);
                            //添加标注
                            map.addOverlay(new BMap.Marker(th.userlocation));   
                       }
                       
                       //智能搜索
                        var local = new BMap.LocalSearch(map, {
                            onSearchComplete: myFun
                        });
                        local.search(myValue);
                        console.log(local.xf)
                        //测试输出坐标（指的是输入框最后确定地点的经纬度）
                        map.addEventListener("click",function(e){
                            //经度
                            console.log(th.userlocation.lng);
                            //维度
                            console.log(th.userlocation.lat);
                            
                            console.log(th.address_detail)
                        })
                    }
                    })

                   
            })
        },
        //摧毁路由方法
        routerRefresh(){} 
       },
       beforeCreate(){
        window._bd_share_main = '';
       },
       mounted(){
           this.id = this.$store.getters.getCurrentAddressId
           this.getLocation()
           
        },
    }
</script>

<style lang="scss" scoped>
  #allmap {
    width: 100%;
    height: 86vh;
  }
  .nav_top {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 99;
  }
  #all {
    padding-top: 10px;
  }

.search-input {
  background-color: #eee;
  border: none;
  border-radius: 80px;
  width: 90%;
  height: 85%;
  overflow: hidden;
  input[type="text"] {
    font-size: 18px;
    border: none;
    width: 80%;
    height: 80%;
    color: #979595;
    background-color: #eee;
    
  }

}
.location {
  font-size: 4.5rem;
}
</style>